<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useRouter } from 'vue-router';
import foll from '@/components/Following.vue';
import reco from '@/components/Recommend.vue';
import search from '@/components/Search.vue';

const router = useRouter();
// 当前选中的导航项
const activeTab = ref('recommend');
// 使用shallowRef避免组件不必要的响应式包装
const isnow = shallowRef(reco);
// 搜索页面是否显示
const showSearch = ref(false);

// 切换标签页
const switchTab = (tab: string) => {
  activeTab.value = tab;
  if (tab === 'following') {
    isnow.value = foll;
  } else if (tab === 'recommend') {
    isnow.value = reco;
  }
};

// 打开搜索页面
const openSearch = () => {
  showSearch.value = true;
};

// 关闭搜索页面
const closeSearch = () => {
  showSearch.value = false;
};


</script>

<template>
  <div class="home-container">
    <!-- 导航条 -->
    <div class="navbar">
      <!-- 左侧导航 -->
      <div class="nav-left">
        <div 
          class="nav-item" 
          :class="{ active: activeTab === 'following' }" 
          @click="switchTab('following')"
        >
          关注
        </div>
        <div
          class="nav-item"
          :class="{ active: activeTab === 'recommend' }"
          @click="switchTab('recommend')"
        >
          推荐
        </div>
      </div>

      <!-- 右侧导航 -->
      <div class="nav-right">
        <div class="search-icon" @click="openSearch">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </div>
        <div class="mail-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
            <polyline points="22,6 12,13 2,6"></polyline>
          </svg>
        </div>
      </div>
    </div>
    
    <!-- 内容容器 -->
    <div class="content-container">
      <component :is="isnow" />
    </div>

    <!-- 搜索覆盖层 -->
    <div v-if="showSearch" class="search-overlay">
      <search @close="closeSearch" />
    </div>
  </div>
</template>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f9f9f9;
  overflow: hidden; /* 防止整个容器滚动 */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 56px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: fixed; /* 改为固定定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
}

.nav-item {
  padding: 0 16px;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.nav-item.active {
  color: #1890ff;
  font-weight: 500;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1890ff;
}

.nav-right {
  display: flex;
  align-items: center;
}

.search-icon, .mail-icon {
  width: 24px;
  height: 24px;
  margin-left: 16px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.search-icon:hover, .mail-icon:hover {
  color: #1890ff;
}

.content-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  padding-top: 56px; /* 为固定导航条留出空间 */
  height: 100vh; /* 确保内容容器填满剩余空间 */
}

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 200;
  height: 100vh;
  overflow-y: auto;
}
</style>